<style scoped>
.layui-row {
    overflow: hidden;
}

.select-item {
    /*float: left;*/
    text-align: right;
    width: 100%;
    /*height: auto !important;*/
    word-break: break-all;
}

.layui-row:after,
.layui-row:before {
    clear: none;
}

.layui-form>>>.layui-form-select {
    z-index: inherit;
}

.department>>>.layui-table td,
.layui-table th {
    padding: 9px 2px;
    white-space: nowrap;
}

select {
    color: #eee
}

option {
    color: #000;
}

.layui-inline {
    padding: 5px 0;
}

.layui-colla-content {
    border-top: none;
}

.layui-colla-title {
    background: none;
    padding-left: 15px !important;
    height: auto;
}

.department>>>.layui-colla-icon {
    left: auto;
    right: 15px !important;
}

.layui-collapse {
    border: 0 !important;
}

/*.department {*/
/*    position: relative;*/
/*}*/
.openicon {
    position: absolute;
    right: 15px;
    top: 10px;
    z-index: 100000;
    border-radius: 50%;
    color: #fff;
    width: 24px;
    text-align: center;
    height: 24px;
    line-height: 24px;
    background: rgba(0, 150, 136, 0.7);
}

.nodata {
    background: #f2f2f2;
    color: #333;
    text-align: center;
    padding: 5px 0;
}

/* .department {
    overflow: auto;
}

.department>>>.layui-table-cell {
    padding: 0 0 !important;
}

.department>>>.layui-table-box {
    overflow-y: auto;
} */

#middle {
    width: 1200px;
    margin: 0 auto;
    height: auto;
    max-width: 1200px;
}

.dede ul li {
    float: left;
    font-size: 20px;
    width: 40px;
    height: 30px;
    line-height: 30px;
}

.time_line_box {
    position: relative;
    height: 60px;
    overflow: hidden;
}

.time_line {
    width: 1200px;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 49px;
    height: 2px;
    background: #dfdfdf;
    -webkit-transition: -webkit-transform 0.4s;
    -moz-transition: -moz-transform 0.4s;
    transition: transform 0.4s;
}

.order_item {
    position: relative;
    bottom: 20px;
    z-index: 2;
    text-align: center;
    font-size: 13px;
    padding-bottom: 5px;
    color: blue;
    float: left;
}

.order_item:after {
    content: '';
    position: absolute;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: -8px;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    border: 2px solid #dfdfdf;
    background-color: #f8f8f8;
}

.selected:after {
    background-color: #845FFD;
    border-color: #845FFD;
}

.filling_line {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: #845FFD;
    transform-origin: left center;
    transition-property: transform;
    transition-duration: 0.3s;
    transition-timing-function: initial;
    transition-delay: initial;
}

.time_tip {
    width: 100%;
    height: 100px;
    line-height: 70px;
    text-align: center;
    color: #151BFD;
    border-bottom: 1px solid #ddd;
}




.time_line_box2 {
    position: relative;
    height: 60px;
    overflow: hidden;
}

.time_line2 {
    width: 1200px;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 49px;
    height: 2px;
    -webkit-transition: -webkit-transform 0.4s;
    -moz-transition: -moz-transform 0.4s;
    transition: transform 0.4s;
}

.order_item2 {
    position: relative;
    bottom: 48px;
    z-index: 2;
    text-align: center;
    font-size: 13px;
    padding-bottom: 5px;
    color: #97828d;
    float: left;
}

.selected2:after {
    background-color: #845FFD;
    border-color: #845FFD;
}

.filling_line2 {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: #845FFD;
    transform-origin: left center;
    transition-property: transform;
    transition-duration: 0.3s;
    transition-timing-function: initial;
    transition-delay: initial;
}

.time_tip2 {
    width: 100%;
    height: 100px;
    line-height: 70px;
    text-align: center;
    color: #151BFD;
    border-bottom: 1px solid #ddd;
}





.time_line_box1 {
    position: relative;
    height: 35px;
    overflow: hidden;
}

.time_line1 {
    width: 1200px;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 49px;
    height: 2px;
    -webkit-transition: -webkit-transform 0.4s;
    -moz-transition: -moz-transform 0.4s;
    transition: transform 0.4s;
}

.order_item1 {
    position: relative;
    bottom: 48px;
    z-index: 2;
    text-align: center;
    font-size: 15px;
    padding-bottom: 5px;
    color: #62515a;
    float: left;
}

.selected1:after {
    background-color: #845FFD;
    border-color: #845FFD;
}

.filling_line1 {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: #845FFD;
    transform-origin: left center;
    transition-property: transform;
    transition-duration: 0.3s;
    transition-timing-function: initial;
    transition-delay: initial;
}

.time_tip1 {
    width: 100%;
    height: 100px;
    line-height: 70px;
    text-align: center;
    color: #151BFD;
    border-bottom: 1px solid #ddd;
}
</style>

<template>
<div>
    <div class="department">
        <div class="layui-col-lg4 select-item">
            <button style="float: left;" v-show="payorder.status == 0" class="layui-btn layui-btn-sm" @click="toPay(2)">发起支付申请</button>
            <button style="float: left;" class="layui-btn layui-btn-sm" @click="$parent.back">返回</button>
            <button style="float: left;" class="layui-btn layui-btn-sm" @click="exportExcel">导出excel</button>
        </div>
        <div style="width: 100%; overflow: auto;margin-bottom: 10px;" id="textarea">
            <table class="layui-table layui-form">

                <thead>
                    <tr>
                        <th>物流公司</th>
                        <th>单号</th>
                        <th>发货地址</th>
                        <th>收货地址</th>
                        <th>司机|车牌</th>
                        <th>运价</th>
                        <th>计价方式</th>
                        <th>结算重量(吨)</th>
                        <th>结算金额(元)</th>
                        <th>扣减金额(元)</th>
                        <th>扣减备注</th>
                        <th>状态</th>
                        <th>拉货日期</th>
                        <th>到货日期</th>
                        <th>关联业务订单编号</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="id9" v-for="(val, index) in wlorders" :key="index">
                        <td>{{val.customername}}</td>
                        <td>{{val.code}}</td>
                        <td>{{val.deliprovince + val.delicity + val.delidistrict + ' ' + val.deliaddress}} </td>
                        <td>{{val.arriprovince + val.arricity + val.arridistrict + ' ' + val.arriaddres}} </td>
                        <td>{{val.drivername + ' ' + val.carcode}}</td>
                        <td>{{val.fareprice}}</td>
                        <td>{{val.farepricetypename}}</td>
                        <td>{{val.fareweight}}</td>
                        <td>{{val.amount}}</td>
                        <td>{{val.deductamount}}</td>
                        <td>{{val.deductremark}}</td>
                        <td>{{val.statusname}}</td>
                        <td>{{val.cargodate}}</td>
                        <td>{{val.unloadtime}}</td>
                        <td>{{getLinkcode(val.items)}}</td>
                    </tr>
                </tbody>
            </table>

        </div>
        <div class="totalbox">
            <div class="total">合计：
                <span><i style="color: red;">{{total}}</i> 单</span>
                <span style="margin-left: 5px;"><i style="color: red;">{{totalAmount}}</i> 元</span>
            </div>
        </div>
    </div>

    <template>
        <div v-if="list.length!=0">
             <!-- 绘画流程节点 -->
            <div class="time_line_box">
                <div class="time_line">
                    <ol v-for="(item,index) in list" :key="index">
                        <li>
                            <a style="width:10%" class="order_item">{{item.name}}</a>
                        </li>

                    </ol>

                    <span class="filling_line"></span>
                </div>

            </div>
             <!-- 审批人 -->
            <div class="time_line_box1">
                <div class="time_line1">
                    <ol v-for="(item,index) in list" :key="index">
                        <li v-if="item.operators.length!==0">
                            <a style="width:10%" class="order_item1">{{item.operators[0].realname}}</a>
                        </li>

                        <li v-else>
                            <a style="width:10%" class="order_item1"></a>
                        </li>
                    </ol>
                </div>

            </div>
             <!-- 备注的地方 -->
            <div class="time_line_box2">
                <div class="time_line2">
                    <ol v-for="(item,index) in list" :key="index">
                        <li v-if="item.logs!==null">
                            <a style="width:10%" class="order_item2">{{item.logs.description}}</a>
                        </li>
                        <li v-else>
                            <a style="width:10%" class="order_item2"></a>
                        </li>
                    </ol>
                </div>

            </div>
        </div>
    </template>
    <!--        <Pagination :cur="currentPage" :all="totalPage" :callback="turnPage" ></Pagination>-->
</div>
</template>

<script>
import Pagination from '../common/Pagination.vue'
let qs = require('qs');

var table1;
export default {
    name: 'WlViewPayExpenses',
    props: ['id'],
    components: {
        Pagination
    },
    data() {
        return {
            totalAmount: 0,
            total: '',
            payorder: "",
            wlorders: [],
            wlOrdercode: '',
            guid: "",
            srguid: "",
            departid: "",
            list: []
        }
    },
    mounted() {
        this.wlOrdercode = this.$store.state.wlOrdercode;
        let that = this;

        layui.use(['form'], function () {
            var form = layui.form,
                layer = layui.layer;

            let loader = layer.load();
            //获取回显数据
            $.ajax({
                url: '/wlinfo/Wlsettlement!detail.action',
                data: {
                    wlsettlid: that.id
                },
                type: "post",
                dataType: "json",
                success: function (res) {
                    if (res.msg == 'success') {
                        that.payorder = res.wlsettlement;
                        that.wlorders = res.wlsettlement.wlinfos;
                        form.render('table');
                        let params = {
                            guid: res.wlsettlement.guid,
                            srguid: "",
                            departid: res.wlsettlement.departid
                        }
                        $.ajax({
                            url: '/sales/Flowtempnode!getFlowNodes.action',
                            data: params,
                            type: "post",
                            dataType: "json",
                            success: function (res) {
                                if (res.msg == 'success') {
                                    that.list = res.nodes
                                } else {
                                    that.toast(res.msg);
                                }
                            },
                            complete: function () {
                                layer.close(loader);
                            }
                        });
                    } else {
                        that.toast("系统错误");
                    }
                },
                complete: function () {
                    layer.close(loader);
                    $('#textarea').css('max-height', $(window).height() - $('#textarea').offset().top - 30);
                }
            });
        });
    },
    updated: function () {
        layui.form.render('select');
        layui.form.render();
    },
    watch: {
        'wlorders': function (val) {
            this.getFinalData();
        }
    },
    methods: {
        getLinkcode: function (items) {
            let linkcodes = '';
            for (let i = 0; i < items.length; i++) {
                linkcodes += items[i].linkcode + ', ';
            }
            return linkcodes != '' ? linkcodes.substr(0, linkcodes.length - 2) : '';
        },
        getFinalData: function () {
            let postData = {};
            let amount = 0;
            for (let i = 0; i < this.wlorders.length; i++) {
                amount += this.wlorders[i].amount;
                postData['entity.customerid'] = this.wlorders[0].customerid;
                postData['entity.customername'] = this.wlorders[0].customername;
                postData['items[' + i + '].wlinfoid'] = this.wlorders[i].guid;
                postData['items[' + i + '].wlinfocode'] = this.wlorders[i].code;
            }
            this.totalAmount = this.toFix2(amount);
            this.total = this.wlorders.length;
            postData['entity.amount'] = this.toFix2(amount);

            return postData;
        },
        toPay: function (type) {
            let that = this;
            layer.confirm('确定要进行支付申请？', {
                btn: ['确定', '取消']
            }, function () {
                that.doPay(type);
            });
        },
        doPay: function (type) {
            let loader = layui.layer.load();
            let postData = this.getFinalData();
            postData.type = type;
            this.$post('/wlinfo/Wlsettlement!save.action', qs.stringify(postData)).then(response => {
                if (response.data.msg == "success") {
                    this.toast('操作成功');
                    this.$parent.switchPage('WlExpensesPay');
                } else {
                    this.toast('系统错误');
                }
                layer.close(loader);
            });
        },
        exportExcel: function () {
            location.href = "/wlinfo/SysWlInfo!exportSOA.action?code=" + this.wlOrdercode;
        },
    }
}
</script>
<style scoped>

</style>
